<template>
  <div class="medical-records">
    <div class="header">
      <h3>{{ title }}</h3>
      <el-button v-if="showAddButton" type="primary" size="small" icon="Plus">添加病历</el-button>
    </div>
    
    <el-table :data="records" style="width: 100%">
      <el-table-column prop="date" label="日期" width="150" />
      <el-table-column prop="hospital" label="医院" width="180" />
      <el-table-column prop="department" label="科室" width="120" />
      <el-table-column prop="doctor" label="医生" width="120" />
      <el-table-column prop="diagnosis" label="诊断结果" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '病历记录'
  },
  records: {
    type: Array,
    default: () => []
  },
  showAddButton: {
    type: Boolean,
    default: true
  }
})
</script>

<style scoped>
.medical-records {
  margin-top: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>